<template>
  <div>
    <div class="search">
      <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
        <el-form-item label="服装名称">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入服装名称"
            clearable
            size="small"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="服装分类">
          <el-select clearable v-model="queryParams.type_id" placeholder="请选择分类">
            <el-option
              v-for="item in optionList"
              :key="item.id"
              :label="item.type_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="middle">
      <!-- 按钮 -->
      <div>
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="dialogVisible = true"
        >新增</el-button>
      </div>
      <!-- 表格 -->
      <div class="tab">
        <el-table
          v-loading="loading"
          border
          :data="dataList"
          style="width: 100%;cursor: pointer;"
          size="medium"
          :header-cell-style="{background:'#f8f8f9',color:'#515a6e',fontWeight: 'bold'}"
        >
          <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
          <el-table-column
            prop="name"
            label="服装名称"
            align="center"
            width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="summary" label="服装概述" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="value_use" label="推荐搭配组合" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="views" label="浏览量" align="center" width="90" sortable />
          <el-table-column prop="collect" label="收藏量" align="center" width="90" sortable />
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="{row}">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="onUpdate(row)">修改</el-button>
              <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="appearMap(row)">设置原产地</el-button> -->
              <el-popconfirm title="确定删除吗？" @confirm="ondelete(row)">
                <el-button slot="reference" size="mini" type="text" icon="el-icon-delete">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paging">
        <el-pagination
          class="pagination-container"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.current"
          :page-sizes="[4, 6, 8]"
          :page-size="queryParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 对话框 -->
    <el-dialog
      title="女性服装数据"
      :visible.sync="dialogVisible"
      width="70%"
      top="5%"
      :before-close="cancel"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="140px">
        <el-row>
          <el-col :span="14">
            <el-form-item label="服装名称" prop="name">
              <el-input clearable placeholder="请输入名称" v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服装分类" prop="type_id">
              <el-select v-model="form.type_id" placeholder="请选择分类">
                <el-option
                  v-for="item in optionList"
                  :key="item.id"
                  :label="item.type_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="服装概述">
              <el-input type="textarea" v-model="form.summary"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="服装产品规格">
              <el-input type="textarea" v-model="form.features"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="服装材质成分">
              <el-input type="textarea" v-model="form.spread"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="服装适用人群">
              <el-input type="textarea" v-model="form.habit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="22">
            <el-form-item label="推荐搭配组合">
              <el-input type="textarea" v-model="form.value_use"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="女性服装数据">
              <el-upload
                class="upload-demo"
                :action="action"
                :on-success="handleSuccess"
                :on-remove="handleRemove"
                :file-list="fileList"
                :before-upload="beforeAvatarUpload"
                list-type="picture"
                :limit="4"
                accept=".jpg, .png"
              >
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.response" alt />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-delete"
                      style="display:block;font-size:20px"
                      @click="handleRemove(file, fileList)"
                    >
                      <i class="el-icon-delete" />
                    </span>
                  </span>
                </div>

                <el-button size="small" type="primary">点击上传</el-button>
                <span class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</span>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="onGallery">立即创建</el-button>
      </span>
    </el-dialog>
    <select-map ref="selectMap" @closeMap="closeMap"></select-map>
  </div>
</template>

<script>
import { getDate } from "@/utils/date";
import selectMap from "@/components/map/selectMap";
import {
  optionList,
  galleryList,
  dl_Gallery,
  add_Gallery,
  up_Gallery,
  selectUpMap
} from "@/api/gallery/api";
export default {
  components: {
    selectMap
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      // 上传地址
      action: "",
      fileList: [],
      queryParams: {
        size: 6,
        current: 1,
        name: "",
        address: "",
        type_id: ""
      },
      total: 0,
      dataList: [],
      optionList: [],
      form: {
        id: "",
        name: "",
        type_id: "",
        summary: "",
        features: "",
        spread: "",
        habit: "",
        value_use: "",
        img_list: "",
        time: getDate()
      },
      selectId: "",
      rules: {
        name: [
          { required: true, message: "请输入服装名称", trigger: "blur" },
          { min: 2, message: "长度大于两位", trigger: "blur" }
        ],
        type_id: [
          { required: true, message: "请选择服装分类", trigger: "change" }
        ]
      }
    };
  },
  created() {
    this.action = process.env.VUE_APP_BASE_API + "admin/setGalleryImg";
    this.getList();
    this.getOptionList();
  },
  methods: {
    getOptionList() {
      optionList().then(res => {
        let data = res.data;
        this.optionList = data.dataList;
      });
    },
    getList() {
      this.loading = true;
      galleryList(this.queryParams).then(res => {
        let data = res.data;
        this.dataList = data.dataList;
        this.total = data.total;
        this.loading = false;
      });
    },
    onReset() {
      this.queryParams.address = "";
      this.queryParams.name = "";
      this.queryParams.type_id = "";
      this.getList();
    },
    // 删除
    ondelete({ id }) {
      let query = {
        id
      };
      dl_Gallery(query).then(res => {
        let data = res.data;
        if (data == "ok") {
          this.getList();
          this.$message.success("删除成功！！！");
        }
      });
    },
    // 取消
    cancel() {
      this.dialogVisible = false;
      this.resetForm();
    },
    // 清空表单数据
    resetForm() {
      this.form = {
        id: "",
        name: "",
        type_id: "",
        summary: "",
        features: "",
        spread: "",
        habit: "",
        value_use: "",
        img_list: "",
        time: getDate()
      };
      this.fileList = [];
    },
    // 添加或修改用户
    onGallery() {
      console.log("dd", this.fileList);
      if (this.fileList.length < 1) {
        this.$message.info("请上传服装图片！！！");
        return;
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.img_list = JSON.stringify(this.fileList);
          this.loading = true;
          if (this.form.id == "") {
            add_Gallery(this.form).then(res => {
              let data = res.data;
              if (data == "ok") {
                this.resetForm();
                this.$message.success("添加成功！！！");
                this.dialogVisible = false;
                this.getList();
              }
            });
          } else if (this.form.id > 0) {
            up_Gallery(this.form).then(res => {
              let data = res.data;
              if (data == "ok") {
                this.resetForm();
                this.$message.success("修改成功！！！");
                this.dialogVisible = false;
                this.getList();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    onUpdate(row) {
      let data = JSON.parse(JSON.stringify(row));
      this.form = data;
      this.fileList = JSON.parse(data.img_list);
      console.log("ddd", this.fileList);

      this.dialogVisible = true;
    },
    //显示地图 进行选址
    appearMap(row) {
      this.selectId = row.id;
      let data = {
        name: row.address,
        lng: row.lng,
        lat: row.lat
      };
      console.log("aa", row);

      this.$refs.selectMap.open(data);
    },
    //关闭地图 并且向表单中注入地址数据
    closeMap(value) {
      let query = {
        address: value.name,
        lng: value.lng,
        lat: value.lat,
        id: this.selectId
      };
      selectUpMap(query).then(res => {
        this.$refs.selectMap.close();
        this.getList()
      });
    },
    handleSizeChange(val) {
      this.queryParams.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    handleRemove(file, fileList) {
      const index = this.fileList.indexOf(file.url);
      this.fileList.splice(index, 1);
    },
    handleSuccess(file, fileList) {
      //此处的fileList是个对象
      //上传成功
      if (file != "") {
        this.fileList.push(fileList);
      }
    }
  }
};
</script>
<style>
.el-table--border .el-table__cell {
  border: none;
}
</style>
<style scoped>
.middle {
  background: #fff;
  margin: 0 15px;
}
.middle > div {
  padding: 20px 20px 10px 20px;
}
.search {
  margin: 10px 15px 0 15px;
}
.paging {
  display: flex;
  justify-content: end;
}
.pagination-container {
  margin-left: auto;
  margin-bottom: 20px;
}
</style>